<template>
  <div>
    <input type="text" v-model="searchData.keyword"  v-focus/>
    <MySearchBar v-model="searchData" @searchHandle="searchHandle"/>
    <Dialog v-model="show">
      <template #header>
        头部
      </template>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati similique architecto animi reprehenderit fugit cum nam cupiditate, iusto sapiente incidunt quisquam enim fugiat ullam numquam, sunt quo porro sit. Laboriosam!
      <template #footer>
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="show = false">确定</el-button>
      </template>
    </Dialog>
    <el-button @click="searchHandle">搜索</el-button>
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script setup>

import { ref } from "vue";
import MySearchBar from "@/components/MySearchBar/index.vue";
import Dialog from "@/components/Dialog/index.vue";
const show = ref(false)
const searchData = ref({
  keyword:'',
  selectOption:[
    {
      label:'全部',
      value:'all'
    },
    {
      label:'视频',
      value:'video'
    },
    {
      label:'文章',
      value:'article'
    }
  ],
  selectValue:'all'
})

const searchHandle = () => {
  console.log("home",searchData.value);
  show.value = true
}
</script>

<style scoped>

</style>
